<template>
  <el-container>
    <!-- 左边侧边栏 -->
    <el-aside width="250px">
      <div class="aside_titlt">
        <img src="https://s.weituibao.com/1582958061265/mlogo.png" alt="" />
        <h2>vue3 admin</h2>
        <Aside></Aside>
      </div>
    </el-aside>

    <!-- 内容区域 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
import { defineComponent } from "vue"
import Aside from "@/views/Home/aside/Aside.vue"

export default defineComponent({
  components: {
    Aside,
  },
})
</script>

<style lang="less">
.el-aside {
  background-color: #222832;
  height: 100vh;
  color: #fff;
  .aside_titlt {
    img {
      width: 50px;
      height: 50px;
      vertical-align: middle;
      margin-right: 15px;
    }
    h2 {
      display: inline-block;
      font-size: 20px;
    }
  }
}

.el-main {
  padding: 0 !important;
}
</style>
